import React from 'react';

import Message from './Message';

import styles from './choiseSuggestionList.module.less';

interface IProp {
  message: Message;
}

interface IState {}

class ChoiseSuggestionList extends React.Component<IProp, IState> {
  constructor(props: IProp) {
    super(props);
    this.state = {};
  }

  render() {
    const messageContent = JSON.parse(this.props.message.messageContent);
    const { choices = [], suggestions = [], mainQuestion } = messageContent;

    return (
      <div className={styles['choise-suggestion-list']}>
        <ul className={`${styles['data-list']} ${styles['choice-data-list']}`}>
          {choices.map((choice: string, index: number) => (
            <li key={choice + index} className={styles['list-item']}>
              <img className={styles['tp-image']} src='/session/tp.png' />
              <div className={styles['item-text']}>{{ choice }}</div>
            </li>
          ))}
        </ul>
        <ul className={`${styles['data-list']} ${styles['suggestion-data-list']}`}>
          {mainQuestion !== 'qizhi_welcome' && (
            <li>
              <p>我猜您可能关心以下问题：</p>
            </li>
          )}
          {suggestions.map((suggestion: string, index: number) => (
            <li key={suggestion + index} className={styles['list-item']}>
              <img className={styles['tp-image']} src='/session/tp.png' />
              <div className={styles['item-text']}>{{ suggestion }}</div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ChoiseSuggestionList;
